<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <canvas id="canvass" width="350" height="350" ></canvas>
        <canvas id="canvasss" width="350" height="350"></canvas>
        <p id="canpos"></p>
        <p id="canposs"></p>
    </div>
</body>
<script>
    var xxr = document.getElementById('canvass')
    xxr.onmousemove = function (e) {
        // console.log(e);
        var div = document.getElementById('canpos')
        div.innerHTML = `(${e.offsetX},${e.offsetY})`
    }
    var ctx = xxr.getContext('2d')
    ctx.moveTo(0, 0) //把路径移动到画布中的指定点，不创建线条。
    ctx.lineTo(100, 100) //添加一个新点，然后在画布中创建从该点到最后指定点的线条。
    ctx.lineTo(150, 100)
    ctx.lineTo(150, 150)
    ctx.lineTo(200, 150)
    ctx.lineTo(200, 200)
    ctx.lineTo(350, 350)

    // ctx.strokeStyle = '#ff9900'
    ctx.stroke() //绘制已定义的路径。

    ctx.beginPath();
    ctx.arc(200, 100, 80, 0, 2 * Math.PI); //创建弧/曲线（用于创建圆形或部分圆）
    ctx.stroke(); //绘制已定义的路径。

    ctx.font = '30px 黑体'
    ctx.fillText('菜鸟', 20, 150) //在画布上绘制"被填充的"文本。

    ctx.strokeText("此去经年", 10, 200); //在画布上绘制文本（无填充）。
    ctx.strokeText("应是良辰好景虚设", 10, 250);


    var xxrs = document.getElementById('canvasss')
    xxrs.onmousemove = function (e) {
        // console.log(e);
        var div = document.getElementById('canposs')
        div.innerHTML = `(${e.offsetX},${e.offsetY})`
    }
    var ctxs = xxrs.getContext('2d')
    // 创建渐变
    var grd = ctxs.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, "white");
    grd.addColorStop(1, "blue");

    // 填充渐变
    ctxs.fillStyle = grd;
    ctxs.fillRect(10, 10, 150, 80); //	绘制"被填充"的矩形。
</script>

</html>